<template>
    <el-dialog :model-value="DialogVisible" title="新增条目" align-center
    draggable>
        <el-form :model="form" label-width="120px" :rules="rules">
            <el-form-item label="目标">
                <el-input v-model="form.target" style="width: 550px"/>
            </el-form-item>
            <el-form-item label="O分值">
                <el-input v-model="form.totalScore" style="width: 550px"/>
            </el-form-item>
            <el-form-item 
                v-for="(item, index) in form.keyList"
                :key="index"
                :label="'提成规则' + (index+1)"
                :prop="'percentList.' + index + '.value'"
                >
                <el-row>
                    <el-col :span="12">
                        <el-input v-model="item.keyResult" style="width: 150px" placeholder="请填写关键结果"/>
                    </el-col>
                    <el-col :span="12">
                        <el-input v-model="item.keyWeight" style="width: 150px" placeholder="请填写KR权重"/>             
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-date-picker
                            v-model="item.startTime"
                            type="date"
                            placeholder="开始日期"
                            :size="size"
                            format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD" 
                        />
                    </el-col>
                    <el-col :span="2" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-date-picker
                            v-model="item.endTime"
                            type="date"
                            placeholder="截止日期"
                            :size="size"
                            format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD"
                        />
                    </el-col>
                </el-row> 
                <el-row> 
                    <el-select v-model="item.liaEmpId" placeholder="请选择责任人">
                        <el-option v-for="(one,i) in liaEmpList" :key="i" :label=one.name :value=one.id />
                    </el-select>
                    <el-button @click.prevent="removeDomain(item)" type="primary" icon="Minus" circle  style="margin-left:20px;"/>
                </el-row>  
            </el-form-item>
            <el-form-item>
                <el-button @click="addDomain" type="primary" icon="Plus" size="large" circle />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-switch v-model="form.state" />
            </el-form-item>
            <el-form-item label="备注说明">
                <el-input v-model="form.ins" type="textarea" style="width: 550px"/>
            </el-form-item>
            <el-form-item>
                <el-button style="width: 200px" type="primary" @click="submitForm">创建</el-button>
                <el-button style="width: 200px" @click="onClose">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import {ref, onMounted, reactive,defineProps, defineEmits, onBeforeMount} from "vue";
import { ElMessage } from 'element-plus'
import {addOkrRule,getEmployeeList} from '@/api/api'

const form = reactive({
    assessorId:4,
    totalScore:'',
    target:'',
    keyList:[{
        key:'',
        keyResult:'',
        KeyWight:'',
        startTime:'',
        endTime:'',
        liaEmpId:''
    }],
    state:'',
    ins:''
})

const DialogVisible = ref(true)    
const props = defineProps({
  DialogVisible: {
    type: Boolean,
    required: true
  },
  id: {
    type: Number,
    required: true, //是否规定必须得有
  },
})

const liaEmpList=ref([])
onBeforeMount(()=>{
    let fourthId=1
    getEmployeeList({fourthId}).then(data=>{
        liaEmpList.value=data.data
    })
})

const emits = defineEmits(['update:KpiDialogVisible'])

const onClose = () => {
  emits('update:dialogFormVisible', false)
}

const removeDomain = (item) => {
  const index = form.percentList.indexOf(item)
  if (index !== -1) {
    form.percentList.splice(index, 1)
  }
}

const addDomain = () => {
  form.keyList.push({
    key: Date.now(),
    keyResult:'',
    KeyWight:'',
    startTime:'',
    endTime:'',
    liaEmpId:''
  })
}

const submitForm = () => {
  
  addOkrRule(form).then(data=>{
    
  })
  /*addScoreRule(form).then(data=>{
    console.log(data);
    if(data.code==200){
      ElMessage({
        message: '新增成功',
        type: 'success',
      })
      dialogFormVisible.value=false
    }
    else{
      ElMessage.error('新增失败');
    }
  })*/
}
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>